<template>
  <div class="pro-button">
    <div style="margin-left: 8px" v-if="props.roles.length > 0">
      <el-button v-for="(item, index) in props.roles" :key="index" v-permission="item.permission" :type="item.type"
                 :size="size" plain @click="item.onClick()">
        <template #icon>
          <component :is="proxy.$icons[item.icon]" />
        </template>
        {{ item.btnName }}
      </el-button>
    </div>
  </div>
</template>

<script setup name="Permission">

import useCurrentInstance from '@/hooks/useCurrentInstance.js'
const { proxy } = useCurrentInstance()
const size = ref('default')
const props = defineProps({
  roles: {
    type: Array,
    default: () => []
  }
});
</script>
<style scoped lang="scss">
// 按钮权限样式
.pro-button {
  display: flex;
  align-items: center;
  padding: 5px 0;
  background: #fff;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.12);
  justify-content: space-between;
}

</style>